import { useEffect, useState } from 'react'
import { loadFriendSite } from '@/apis/friend'
import { FriendSite } from '@/types/friend-site'

export default function FriendSites() {
  const [friendSites, setFriendSites] = useState<FriendSite[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchFriendSites = async () => {
      try {
        const sites = await loadFriendSite()
        setFriendSites(sites.items)
      } catch (error) {
        console.error('Failed to load friend sites:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchFriendSites()
  }, [])

  if (loading) {
    return (
      <div className="flex flex-wrap items-center justify-center gap-[24px]">
        <span className="text-sm text-gray-500">Loading...</span>
      </div>
    )
  }

  if (friendSites.length === 0) {
    return null
  }

  return (
    <div className="flex flex-wrap items-center justify-center gap-[24px]">
      {friendSites
        .filter((site) => site.status === 1) // 只显示正常状态的站点
        .map((site) => (
          <a
            key={site.id}
            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
            href={site.site}
            target="_blank"
            rel="noopener noreferrer"
          >
            {site.name}
          </a>
        ))}
    </div>
  )
}
